<template>
  <div class="option">
            <el-radio v-show="radioType==='单选'" v-model="option.isRight" :label="isRight" @change="handleRadio">{{option.code}}</el-radio>
            <el-checkbox v-show="radioType==='多选'" class="optradio" v-model="option.isRight" :label="option.code" >{{option.code}}</el-checkbox>
            <el-input class="input-title"  v-model="option.title"></el-input>
            <el-upload
              action="#"
              list-type="picture-card"
              :limit="limit"
              :auto-upload="false"
              :class="{ disabled: uploadDisabled }"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="handleChange"
              >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
</template>

<script>
export default {
  props: {
    option: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      require: true
    },
    radioType: {
      type: String,
      default: ''
    }

  },
  data () {
    return {
      disabled: false,
      limit: 1,
      uploadDisabled: false,
      isRight: true,
      fileList: []
    }
  },
  methods: {
    handlePictureCardPreview (file) {
      this.$emit('handlePictureCardPreview', file)
    },
    handleRemove (file) {
      setTimeout(() => {
        this.uploadDisabled = false
      }, 1000)
      this.$emit('handleRemove', this.option)
    },
    handleChange (file, fileList) {
      const reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = (e) => {
        const base64 = e.target.result
        this.$emit('uploader', { item: this.option, base64 })
      }

      if (fileList.length > 0) {
        this.uploadDisabled = true
      } else {
        this.uploadDisabled = false
      }
    },
    handleRadio (lable) {
      this.$emit('handleRadio', { lable, index: this.index })
    }
  }
}
</script>

<style scpped>
    .option{
        height: 60px;
    }
    .input-title{
        margin-right: 10px;
    }
    .disabled .el-upload--picture-card {
        display: none !important;
    }
    .el-upload--picture-card{
        height: 40px;
        line-height: 40px;
        padding-top: 6px;
        vertical-align: middle;
    }
    .el-upload-list--picture-card .el-upload-list__item {
        height: 40px;

    }

    .el-upload-list--picture-card .el-upload-list__item.is-ready{
        margin: 0px !important;
        position: relative;
        top: 6px;
    }
</style>
